<!DOCTYPE html>
<!-- saved from url=(0059)file:///C:/Users/pbrenner/Downloads/schlaffit100/index.html -->
<html lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene</title>
<meta name="description" content="SchlafFit100: interaktives neuronales Netz mit 100 Eingabe- und 100 Ausgabeneuronen zur Optimierung von Schlafhygiene, Schlafdauer, Wachzeiten, Bildschirmzeit und Stress, im Stil einer klassischen Windows-Business-Anwendung.">
<link rel="icon" href="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/style.css">
</head>
<body>
<a class="skip-link" href="file:///C:/Users/pbrenner/Downloads/schlaffit100/index.html#main-content">Zum Inhalt springen</a>

<div class="app-window" role="application" aria-label="SchlafFit100 Anwendungsfenster">

  <!-- Titelleiste -->
  <div class="title-bar">
    <div class="title-bar-left">
      <img class="title-icon" src="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/favicon.svg" alt="">
      <span class="title-text">SchlafFit100 — Neuronale Visualisierungseinheit (Schlaf &amp; Schlafhygiene)</span>
    </div>
    <div class="title-bar-buttons">
      <button class="title-btn" id="btn-info" type="button" aria-label="Info anzeigen" title="Info">?</button>
      <button class="title-btn" type="button" aria-label="Minimieren (deaktiviert in Demo)" title="Minimieren">_</button>
      <button class="title-btn" type="button" aria-label="Maximieren (deaktiviert in Demo)" title="Maximieren">▢</button>
      <button class="title-btn close" type="button" aria-label="Schließen (deaktiviert in Demo)" title="Schließen">✕</button>
    </div>
  </div>

  <!-- Menüleiste (dekorativ, klassische Business-Software-Optik) -->
  <div class="menu-bar" aria-hidden="true">
    <span>Datei</span><span>Bearbeiten</span><span>Ansicht</span><span>Netz</span><span>Extras</span><span>Hilfe</span>
  </div>

  <header class="app-header">
    <h1 class="app-title">SchlafFit100</h1>
    <p class="app-subtitle">Gesunder Schlaf — und fit danach</p>
    <span class="status-line" id="status-line">Browserfähiges neuronales Netz (100→64→100) · trainiert mit 1.000.000 synthetischen Musterfällen</span>
  </header>

  <!-- Toolbar -->
  <div class="toolbar" role="toolbar" aria-label="Aktionen">
    <button class="win-button" id="btn-random" type="button">🎲 Zufallsprofil laden</button>
    <button class="win-button" id="btn-reset" type="button">↺ Zurücksetzen</button>
    <button class="win-button" id="btn-toggle-all" type="button">⬍ Alle Kategorien ein-/ausklappen</button>
    <div class="toolbar-spacer"></div>
    <span class="legend-hint">Eingabe = ziehbare Slider · Ausgabe = berechnete Balken (schreibgeschützt)</span>
  </div>

  <main id="main-content" class="main-layout">
    <section class="neuron-column" id="input-column" aria-label="Eingabe-Neuronen">
      <h2 class="column-heading">Eingabe-Neuronen (100)</h2>
      <div id="input-categories"><div class="category-panel" data-cat-id="A"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(74, 111, 165);"><span class="cat-name">A. Schlafverhalten &amp; Chronotyp (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_A_0">Alter</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_0" aria-label="Alter (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_0" id="in_A_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_1">Geschlecht</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_1" aria-label="Geschlecht (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_1" id="in_A_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_2">Chronotyp (Frühtyp/​Spättyp)</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_2" aria-label="Chronotyp (Frühtyp/Spättyp) (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_2" id="in_A_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_3">Übliche Einschlafzeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_3" aria-label="Übliche Einschlafzeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_3" id="in_A_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_4">Übliche Aufwachzeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_4" aria-label="Übliche Aufwachzeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_4" id="in_A_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_5">Schlafdauer aktuell</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_5" aria-label="Schlafdauer aktuell (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_5" id="in_A_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_6">Wunsch-​Schlafdauer</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_6" aria-label="Wunsch-Schlafdauer (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_6" id="in_A_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_7">Einschlafdauer (Latenz)</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_7" aria-label="Einschlafdauer (Latenz) (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_7" id="in_A_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_8">Nächtliches Aufwachen-​Häufigkeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_8" aria-label="Nächtliches Aufwachen-Häufigkeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_8" id="in_A_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_9">Schlafeffizienz-​Gefühl</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_9" aria-label="Schlafeffizienz-Gefühl (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_9" id="in_A_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_10">Wochenend-​/​Wochentag-​Differenz</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_10" aria-label="Wochenend-/Wochentag-Differenz (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_10" id="in_A_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_11">Schichtdienst/​Nachtarbeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_11" aria-label="Schichtdienst/Nachtarbeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_11" id="in_A_11_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_12">Jetlag/​Zeitzonenwechsel</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_12" aria-label="Jetlag/Zeitzonenwechsel (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_12" id="in_A_12_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_13">Mittagsschlaf-​Gewohnheit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_13" aria-label="Mittagsschlaf-Gewohnheit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_13" id="in_A_13_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_A_14">Traumerinnerung-​Häufigkeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_A_14" aria-label="Traumerinnerung-Häufigkeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a6fa5;"></div>
          </div>
          <output class="neuron-value" for="in_A_14" id="in_A_14_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="B"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(90, 159, 174);"><span class="cat-name">B. Schlafumgebung (12)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_B_0">Raumtemperatur</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_0" aria-label="Raumtemperatur (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_0" id="in_B_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_1">Verdunkelung/​Lichteinfall</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_1" aria-label="Verdunkelung/Lichteinfall (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_1" id="in_B_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_2">Lärmpegel</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_2" aria-label="Lärmpegel (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_2" id="in_B_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_3">Matratzenqualität</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_3" aria-label="Matratzenqualität (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_3" id="in_B_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_4">Kissenqualität</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_4" aria-label="Kissenqualität (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_4" id="in_B_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_5">Bildschirme im Schlafzimmer</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_5" aria-label="Bildschirme im Schlafzimmer (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_5" id="in_B_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_6">Luftfeuchtigkeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_6" aria-label="Luftfeuchtigkeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_6" id="in_B_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_7">Belüftung/​Frischluft</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_7" aria-label="Belüftung/Frischluft (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_7" id="in_B_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_8">Bettwäsche-​Komfort</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_8" aria-label="Bettwäsche-Komfort (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_8" id="in_B_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_9">Partner-​/​Haustier-​Störung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_9" aria-label="Partner-/Haustier-Störung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_9" id="in_B_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_10">Schlafzimmer-​Ordnung/​Ruhe</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_10" aria-label="Schlafzimmer-Ordnung/Ruhe (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_10" id="in_B_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_B_11">Wecker-​Lautstärke/​-​Art</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_B_11" aria-label="Wecker-Lautstärke/-Art (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#5a9fae;"></div>
          </div>
          <output class="neuron-value" for="in_B_11" id="in_B_11_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="C"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(201, 138, 62);"><span class="cat-name">C. Bildschirmzeit &amp; Mediennutzung (13)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_C_0">Bildschirmzeit gesamt/​Tag</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_0" aria-label="Bildschirmzeit gesamt/Tag (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_0" id="in_C_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_1">Bildschirmzeit nach 20 Uhr</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_1" aria-label="Bildschirmzeit nach 20 Uhr (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_1" id="in_C_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_2">Blaulichtfilter-​Nutzung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_2" aria-label="Blaulichtfilter-Nutzung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_2" id="in_C_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_3">Social-​Media-​Nutzung abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_3" aria-label="Social-Media-Nutzung abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_3" id="in_C_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_4">Serien-​/​Streaming-​Konsum abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_4" aria-label="Serien-/Streaming-Konsum abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_4" id="in_C_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_5">Gaming abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_5" aria-label="Gaming abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_5" id="in_C_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_6">Arbeits-​E-​Mails abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_6" aria-label="Arbeits-E-Mails abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_6" id="in_C_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_7">Smartphone im Bett</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_7" aria-label="Smartphone im Bett (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_7" id="in_C_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_8">Benachrichtigungen nachts aktiv</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_8" aria-label="Benachrichtigungen nachts aktiv (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_8" id="in_C_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_9">Nachrichtenkonsum vor dem Schlafen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_9" aria-label="Nachrichtenkonsum vor dem Schlafen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_9" id="in_C_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_10">Hörbuch/​Podcast beim Einschlafen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_10" aria-label="Hörbuch/Podcast beim Einschlafen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_10" id="in_C_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_11">Lesen (Papier) vor dem Schlafen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_11" aria-label="Lesen (Papier) vor dem Schlafen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_11" id="in_C_11_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_C_12">Bildschirm-​Helligkeit abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_C_12" aria-label="Bildschirm-Helligkeit abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#c98a3e;"></div>
          </div>
          <output class="neuron-value" for="in_C_12" id="in_C_12_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="D"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(138, 94, 168);"><span class="cat-name">D. Stress &amp; Psyche (13)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_D_0">Stresslevel allgemein</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_0" aria-label="Stresslevel allgemein (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_0" id="in_D_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_1">Grübelneigung abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_1" aria-label="Grübelneigung abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_1" id="in_D_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_2">Arbeitsdruck</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_2" aria-label="Arbeitsdruck (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_2" id="in_D_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_3">Angstgefühle</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_3" aria-label="Angstgefühle (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_3" id="in_D_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_4">Stimmungslage</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_4" aria-label="Stimmungslage (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_4" id="in_D_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_5">Entspannungstechniken-​Nutzung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_5" aria-label="Entspannungstechniken-Nutzung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_5" id="in_D_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_6">Achtsamkeit/​Meditation</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_6" aria-label="Achtsamkeit/Meditation (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_6" id="in_D_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_7">Sorgen um Schlaf selbst</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_7" aria-label="Sorgen um Schlaf selbst (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_7" id="in_D_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_8">Reizbarkeit tagsüber</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_8" aria-label="Reizbarkeit tagsüber (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_8" id="in_D_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_9">Soziale Konflikte</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_9" aria-label="Soziale Konflikte (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_9" id="in_D_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_10">Finanzielle Sorgen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_10" aria-label="Finanzielle Sorgen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_10" id="in_D_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_11">Zukunftsängste</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_11" aria-label="Zukunftsängste (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_11" id="in_D_11_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_D_12">Emotionale Erschöpfung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_D_12" aria-label="Emotionale Erschöpfung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#8a5ea8;"></div>
          </div>
          <output class="neuron-value" for="in_D_12" id="in_D_12_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="E"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(181, 73, 91);"><span class="cat-name">E. Substanzen &amp; Ernährung abends (12)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_E_0">Koffeinkonsum gesamt/​Tag</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_0" aria-label="Koffeinkonsum gesamt/Tag (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_0" id="in_E_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_1">Koffein nach 14 Uhr</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_1" aria-label="Koffein nach 14 Uhr (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_1" id="in_E_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_2">Alkoholkonsum abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_2" aria-label="Alkoholkonsum abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_2" id="in_E_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_3">Nikotinkonsum</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_3" aria-label="Nikotinkonsum (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_3" id="in_E_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_4">Schwere Mahlzeiten abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_4" aria-label="Schwere Mahlzeiten abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_4" id="in_E_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_5">Zuckerkonsum abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_5" aria-label="Zuckerkonsum abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_5" id="in_E_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_6">Wasserzufuhr abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_6" aria-label="Wasserzufuhr abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_6" id="in_E_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_7">Nahrungsergänzung (Melatonin etc.)</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_7" aria-label="Nahrungsergänzung (Melatonin etc.) (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_7" id="in_E_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_8">Medikamenteneinnahme</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_8" aria-label="Medikamenteneinnahme (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_8" id="in_E_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_9">Abendliches Hungergefühl</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_9" aria-label="Abendliches Hungergefühl (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_9" id="in_E_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_10">Süßigkeiten-​Konsum abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_10" aria-label="Süßigkeiten-Konsum abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_10" id="in_E_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_E_11">Kräutertee-​Konsum abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_E_11" aria-label="Kräutertee-Konsum abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#b5495b;"></div>
          </div>
          <output class="neuron-value" for="in_E_11" id="in_E_11_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="F"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(74, 143, 92);"><span class="cat-name">F. Bewegung &amp; Tageslicht (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_F_0">Sportliche Aktivität/​Woche</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_0" aria-label="Sportliche Aktivität/Woche (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_0" id="in_F_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_1">Sport-​Zeitpunkt (abends/​morgens)</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_1" aria-label="Sport-Zeitpunkt (abends/morgens) (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_1" id="in_F_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_2">Tageslicht-​Exposition</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_2" aria-label="Tageslicht-Exposition (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_2" id="in_F_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_3">Outdoor-​Zeit/​Tag</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_3" aria-label="Outdoor-Zeit/Tag (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_3" id="in_F_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_4">Sitzende Tätigkeit/​Tag</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_4" aria-label="Sitzende Tätigkeit/Tag (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_4" id="in_F_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_5">Spaziergang abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_5" aria-label="Spaziergang abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_5" id="in_F_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_6">Dehnen/​Yoga abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_6" aria-label="Dehnen/Yoga abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_6" id="in_F_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_7">Intensität Training</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_7" aria-label="Intensität Training (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_7" id="in_F_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_8">Bewegungsmangel-​Gefühl</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_8" aria-label="Bewegungsmangel-Gefühl (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_8" id="in_F_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_F_9">Energielevel tagsüber</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_F_9" aria-label="Energielevel tagsüber (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#4a8f5c;"></div>
          </div>
          <output class="neuron-value" for="in_F_9" id="in_F_9_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="G"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(106, 111, 143);"><span class="cat-name">G. Gesundheit &amp; Medizinisches (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_G_0">Schnarchen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_0" aria-label="Schnarchen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_0" id="in_G_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_1">Schlafapnoe-​Verdacht</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_1" aria-label="Schlafapnoe-Verdacht (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_1" id="in_G_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_2">Restless-​Legs-​Symptome</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_2" aria-label="Restless-Legs-Symptome (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_2" id="in_G_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_3">Chronische Schmerzen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_3" aria-label="Chronische Schmerzen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_3" id="in_G_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_4">Hormonelle Veränderungen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_4" aria-label="Hormonelle Veränderungen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_4" id="in_G_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_5">Menopause/​Wechseljahre-​Symptome</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_5" aria-label="Menopause/Wechseljahre-Symptome (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_5" id="in_G_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_6">Verdauungsprobleme abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_6" aria-label="Verdauungsprobleme abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_6" id="in_G_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_7">Allergien/​Atemwege</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_7" aria-label="Allergien/Atemwege (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_7" id="in_G_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_8">Herz-​Kreislauf-​Vorerkrankung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_8" aria-label="Herz-Kreislauf-Vorerkrankung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_8" id="in_G_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_G_9">Familiäre Schlafstörungen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_G_9" aria-label="Familiäre Schlafstörungen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#6a6f8f;"></div>
          </div>
          <output class="neuron-value" for="in_G_9" id="in_G_9_val">50</output>
        </div></div></div><div class="category-panel" data-cat-id="H"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(165, 118, 62);"><span class="cat-name">H. Alltag &amp; Routine (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row">
          <label class="neuron-label" for="in_H_0">Feste Schlafenszeit-​Konsistenz</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_0" aria-label="Feste Schlafenszeit-Konsistenz (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_0" id="in_H_0_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_1">Abendroutine vorhanden</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_1" aria-label="Abendroutine vorhanden (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_1" id="in_H_1_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_2">Wecker-​Nutzung an freien Tagen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_2" aria-label="Wecker-Nutzung an freien Tagen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_2" id="in_H_2_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_3">Pendelzeit/​Arbeitsweg</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_3" aria-label="Pendelzeit/Arbeitsweg (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_3" id="in_H_3_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_4">Arbeitszeit-​Flexibilität</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_4" aria-label="Arbeitszeit-Flexibilität (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_4" id="in_H_4_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_5">Homeoffice-​Anteil</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_5" aria-label="Homeoffice-Anteil (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_5" id="in_H_5_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_6">Familiäre Verpflichtungen abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_6" aria-label="Familiäre Verpflichtungen abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_6" id="in_H_6_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_7">Kinderbetreuung nachts</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_7" aria-label="Kinderbetreuung nachts (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_7" id="in_H_7_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_8">Haustier-​Versorgung nachts</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_8" aria-label="Haustier-Versorgung nachts (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_8" id="in_H_8_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_9">Reisetätigkeit</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_9" aria-label="Reisetätigkeit (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_9" id="in_H_9_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_10">Gesellschaftliche Termine abends</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_10" aria-label="Gesellschaftliche Termine abends (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_10" id="in_H_10_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_11">Tagesstruktur-​Konsistenz</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_11" aria-label="Tagesstruktur-Konsistenz (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_11" id="in_H_11_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_12">To-​Do-​Liste vor dem Schlafen</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_12" aria-label="To-Do-Liste vor dem Schlafen (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_12" id="in_H_12_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_13">Wochenendplanung Schlaf</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_13" aria-label="Wochenendplanung Schlaf (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_13" id="in_H_13_val">50</output>
        </div><div class="neuron-row">
          <label class="neuron-label" for="in_H_14">Motivation Schlafverbesserung</label>
          <div class="bar-track">
            <input class="input-slider" type="range" min="0" max="100" step="1" value="50" id="in_H_14" aria-label="Motivation Schlafverbesserung (0 bis 100)">
            <div class="bar-fill" style="width:50%; background:#a5763e;"></div>
          </div>
          <output class="neuron-value" for="in_H_14" id="in_H_14_val">50</output>
        </div></div></div></div>
    </section>

    <section class="compute-column" aria-label="Netz-Recheneinheit">
      <p class="compute-title">Netz-Recheneinheit</p>
      <p class="compute-number">SchlafFit<span style="color:#8a5ea8">100</span></p>
      <div class="compute-diagram" aria-hidden="true">
        <div class="compute-node">100<br>Eingaben</div>
        <span class="compute-arrow">⇓</span>
        <div class="compute-node compute-node-hidden">verdeckte<br>Schicht</div>
        <span class="compute-arrow">⇓</span>
        <div class="compute-node">100<br>Ausgaben</div>
      </div>
      <p class="compute-status" id="compute-status">Bereit</p>
      <p class="compute-meta">Trainiertes Netz · 64 verdeckte Neuronen<br>ReLU → Sigmoid, echte Gewichte<br>Browserfähig · client-seitig · &lt;50&nbsp;ms</p>
    </section>

    <section class="neuron-column" id="output-column" aria-label="Ausgabe-Neuronen">
      <h2 class="column-heading">Ausgabe-Neuronen (100)</h2>
      <div id="output-categories"><div class="category-panel" data-cat-id="A"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(106, 143, 197);"><span class="cat-name">A. Schlaf-Zielwerte &amp; Rhythmus (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row" id="row_out_A_0">
            <span class="neuron-label">Empfohlene Schlafdauer</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_0_fill" style="width: 64%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_0_val">7,9 h</span>
          </div><div class="neuron-row" id="row_out_A_1">
            <span class="neuron-label">Empfohlene Einschlafzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_1_fill" style="width: 48%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_1_val">22,4 Uhr</span>
          </div><div class="neuron-row" id="row_out_A_2">
            <span class="neuron-label">Empfohlene Aufwachzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_2_fill" style="width: 48%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_2_val">6,9 Uhr</span>
          </div><div class="neuron-row" id="row_out_A_3">
            <span class="neuron-label">Schlaffenster-​Breite</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_3_fill" style="width: 48%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_3_val">51 Min.</span>
          </div><div class="neuron-row" id="row_out_A_4">
            <span class="neuron-label">Empfohlene Einschlaflatenz</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_4_fill" style="width: 47%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_4_val">17 Min.</span>
          </div><div class="neuron-row" id="row_out_A_5">
            <span class="neuron-label">Chronotyp-​Anpassungsgrad</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_5_fill" style="width: 47%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_5_val">47 %</span>
          </div><div class="neuron-row" id="row_out_A_6">
            <span class="neuron-label">Wochenend-​Schlafkonsistenz-​Ziel</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_6_fill" style="width: 47%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_6_val">47 %</span>
          </div><div class="neuron-row" id="row_out_A_7">
            <span class="neuron-label">Mittagsschlaf-​Empfehlung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_7_fill" style="width: 47%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_7_val">14 Min.</span>
          </div><div class="neuron-row" id="row_out_A_8">
            <span class="neuron-label">Lichttherapie-​Bedarf</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_8_fill" style="width: 49%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_8_val">49 %</span>
          </div><div class="neuron-row" id="row_out_A_9">
            <span class="neuron-label">Melatonin-​Zeitfenster</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_9_fill" style="width: 49%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_9_val">2,0 Std. vor Schlaf</span>
          </div><div class="neuron-row" id="row_out_A_10">
            <span class="neuron-label">Koffein-​Stoppzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_10_fill" style="width: 60%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_10_val">10 Std. vor Schlaf</span>
          </div><div class="neuron-row" id="row_out_A_11">
            <span class="neuron-label">Letzte-​Mahlzeit-​Zeitfenster</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_11_fill" style="width: 60%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_11_val">2,8 Std. vor Schlaf</span>
          </div><div class="neuron-row" id="row_out_A_12">
            <span class="neuron-label">Sport-​Stoppzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_12_fill" style="width: 60%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_12_val">2,8 Std. vor Schlaf</span>
          </div><div class="neuron-row" id="row_out_A_13">
            <span class="neuron-label">Bildschirm-​Stoppzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_13_fill" style="width: 59%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_13_val">59 Min. vor Schlaf</span>
          </div><div class="neuron-row" id="row_out_A_14">
            <span class="neuron-label">Erwartete Verbesserung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_A_14_fill" style="width: 59%; background: rgb(106, 143, 197);"></div>
            </div>
            <span class="neuron-value" id="out_A_14_val">8 Wo.</span>
          </div></div></div><div class="category-panel" data-cat-id="B"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(106, 175, 124);"><span class="cat-name">B. Abendroutine-Empfehlung (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row dish-row" id="row_out_B_0">
            <span class="neuron-label">Ritual-​Slot 1</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_0_fill" style="width: 46%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_0_val">46%</span>
            <span class="dish-name" id="out_B_0_dish">Leichtes Dehnen/Yoga</span>
          </div><div class="neuron-row dish-row" id="row_out_B_1">
            <span class="neuron-label">Ritual-​Slot 2</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_1_fill" style="width: 46%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_1_val">46%</span>
            <span class="dish-name" id="out_B_1_dish">Kurzer Spaziergang an frischer Luft</span>
          </div><div class="neuron-row dish-row" id="row_out_B_2">
            <span class="neuron-label">Ritual-​Slot 3</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_2_fill" style="width: 46%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_2_val">46%</span>
            <span class="dish-name" id="out_B_2_dish">Sanfte Musik oder Naturgeräusche</span>
          </div><div class="neuron-row dish-row" id="row_out_B_3">
            <span class="neuron-label">Ritual-​Slot 4</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_3_fill" style="width: 46%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_3_val">46%</span>
            <span class="dish-name" id="out_B_3_dish">Dimmlicht/Kerzenlicht einschalten</span>
          </div><div class="neuron-row dish-row" id="row_out_B_4">
            <span class="neuron-label">Ritual-​Slot 5</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_4_fill" style="width: 47%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_4_val">47%</span>
            <span class="dish-name" id="out_B_4_dish">Warmes Bad oder Dusche</span>
          </div><div class="neuron-row dish-row" id="row_out_B_5">
            <span class="neuron-label">Ritual-​Slot 6</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_5_fill" style="width: 47%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_5_val">47%</span>
            <span class="dish-name" id="out_B_5_dish">Kräutertee (Baldrian, Kamille)</span>
          </div><div class="neuron-row dish-row" id="row_out_B_6">
            <span class="neuron-label">Ritual-​Slot 7</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_6_fill" style="width: 47%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_6_val">47%</span>
            <span class="dish-name" id="out_B_6_dish">Ruhiges Gespräch mit Partner/Familie</span>
          </div><div class="neuron-row dish-row" id="row_out_B_7">
            <span class="neuron-label">Ritual-​Slot 8</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_7_fill" style="width: 47%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_7_val">47%</span>
            <span class="dish-name" id="out_B_7_dish">Aromatherapie (Lavendel)</span>
          </div><div class="neuron-row dish-row" id="row_out_B_8">
            <span class="neuron-label">Ritual-​Slot 9</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_8_fill" style="width: 45%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_8_val">45%</span>
            <span class="dish-name" id="out_B_8_dish">Progressive Muskelentspannung</span>
          </div><div class="neuron-row dish-row" id="row_out_B_9">
            <span class="neuron-label">Ritual-​Slot 10</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_B_9_fill" style="width: 45%; background: rgb(106, 175, 124);"></div>
            </div>
            <span class="neuron-value" id="out_B_9_val">45%</span>
            <span class="dish-name" id="out_B_9_dish">To-Do-Liste für morgen schreiben</span>
          </div></div></div><div class="category-panel" data-cat-id="C"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(90, 159, 174);"><span class="cat-name">C. Schlafzimmer-Optimierung (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row dish-row" id="row_out_C_0">
            <span class="neuron-label">Maßnahme-​Slot 1</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_0_fill" style="width: 39%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_0_val">39%</span>
            <span class="dish-name" id="out_C_0_dish">Raumtemperatur auf 16–18 °C senken</span>
          </div><div class="neuron-row dish-row" id="row_out_C_1">
            <span class="neuron-label">Maßnahme-​Slot 2</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_1_fill" style="width: 39%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_1_val">39%</span>
            <span class="dish-name" id="out_C_1_dish">Regelmäßig lüften vor dem Schlafen</span>
          </div><div class="neuron-row dish-row" id="row_out_C_2">
            <span class="neuron-label">Maßnahme-​Slot 3</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_2_fill" style="width: 39%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_2_val">39%</span>
            <span class="dish-name" id="out_C_2_dish">Luftbefeuchter nutzen</span>
          </div><div class="neuron-row dish-row" id="row_out_C_3">
            <span class="neuron-label">Maßnahme-​Slot 4</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_3_fill" style="width: 39%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_3_val">39%</span>
            <span class="dish-name" id="out_C_3_dish">Hochwertige Bettwäsche verwenden</span>
          </div><div class="neuron-row dish-row" id="row_out_C_4">
            <span class="neuron-label">Maßnahme-​Slot 5</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_4_fill" style="width: 40%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_4_val">40%</span>
            <span class="dish-name" id="out_C_4_dish">Warmes Nachtlicht statt hellem Licht</span>
          </div><div class="neuron-row dish-row" id="row_out_C_5">
            <span class="neuron-label">Maßnahme-​Slot 6</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_5_fill" style="width: 40%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_5_val">40%</span>
            <span class="dish-name" id="out_C_5_dish">Schlafzimmer aufräumen und entrümpeln</span>
          </div><div class="neuron-row dish-row" id="row_out_C_6">
            <span class="neuron-label">Maßnahme-​Slot 7</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_6_fill" style="width: 40%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_6_val">40%</span>
            <span class="dish-name" id="out_C_6_dish">Verdunkelungsvorhänge anbringen</span>
          </div><div class="neuron-row dish-row" id="row_out_C_7">
            <span class="neuron-label">Maßnahme-​Slot 8</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_7_fill" style="width: 40%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_7_val">40%</span>
            <span class="dish-name" id="out_C_7_dish">Beruhigenden Raumduft verwenden</span>
          </div><div class="neuron-row dish-row" id="row_out_C_8">
            <span class="neuron-label">Maßnahme-​Slot 9</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_8_fill" style="width: 41%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_8_val">41%</span>
            <span class="dish-name" id="out_C_8_dish">Blaulichtfilter-Lampe verwenden</span>
          </div><div class="neuron-row dish-row" id="row_out_C_9">
            <span class="neuron-label">Maßnahme-​Slot 10</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_C_9_fill" style="width: 41%; background: rgb(90, 159, 174);"></div>
            </div>
            <span class="neuron-value" id="out_C_9_val">41%</span>
            <span class="dish-name" id="out_C_9_dish">Haustier im separaten Raum schlafen lassen</span>
          </div></div></div><div class="category-panel" data-cat-id="D"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(201, 138, 62);"><span class="cat-name">D. Bildschirm- &amp; Medienreduktion (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row dish-row" id="row_out_D_0">
            <span class="neuron-label">Maßnahme-​Slot 1</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_0_fill" style="width: 38%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_0_val">38%</span>
            <span class="dish-name" id="out_D_0_dish">Hörbuch statt Bildschirm zum Einschlafen</span>
          </div><div class="neuron-row dish-row" id="row_out_D_1">
            <span class="neuron-label">Maßnahme-​Slot 2</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_1_fill" style="width: 38%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_1_val">38%</span>
            <span class="dish-name" id="out_D_1_dish">Bildschirmhelligkeit abends automatisch dimmen</span>
          </div><div class="neuron-row dish-row" id="row_out_D_2">
            <span class="neuron-label">Maßnahme-​Slot 3</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_2_fill" style="width: 39%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_2_val">39%</span>
            <span class="dish-name" id="out_D_2_dish">Nachtmodus/Blaulichtfilter aktivieren</span>
          </div><div class="neuron-row dish-row" id="row_out_D_3">
            <span class="neuron-label">Maßnahme-​Slot 4</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_3_fill" style="width: 39%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_3_val">39%</span>
            <span class="dish-name" id="out_D_3_dish">E-Ink-Lesegerät statt Smartphone-Display</span>
          </div><div class="neuron-row dish-row" id="row_out_D_4">
            <span class="neuron-label">Maßnahme-​Slot 5</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_4_fill" style="width: 39%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_4_val">39%</span>
            <span class="dish-name" id="out_D_4_dish">Digitale Auszeit am Wochenende einplanen</span>
          </div><div class="neuron-row dish-row" id="row_out_D_5">
            <span class="neuron-label">Maßnahme-​Slot 6</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_5_fill" style="width: 39%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_5_val">39%</span>
            <span class="dish-name" id="out_D_5_dish">Gaming-Sessions auf Nachmittag verlegen</span>
          </div><div class="neuron-row dish-row" id="row_out_D_6">
            <span class="neuron-label">Maßnahme-​Slot 7</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_6_fill" style="width: 40%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_6_val">40%</span>
            <span class="dish-name" id="out_D_6_dish">"Nicht stören"-Modus ab 22 Uhr aktivieren</span>
          </div><div class="neuron-row dish-row" id="row_out_D_7">
            <span class="neuron-label">Maßnahme-​Slot 8</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_7_fill" style="width: 39%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_7_val">39%</span>
            <span class="dish-name" id="out_D_7_dish">Benachrichtigungen ab 21 Uhr stummschalten</span>
          </div><div class="neuron-row dish-row" id="row_out_D_8">
            <span class="neuron-label">Maßnahme-​Slot 9</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_8_fill" style="width: 37%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_8_val">37%</span>
            <span class="dish-name" id="out_D_8_dish">Streaming-Autoplay deaktivieren</span>
          </div><div class="neuron-row dish-row" id="row_out_D_9">
            <span class="neuron-label">Maßnahme-​Slot 10</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_D_9_fill" style="width: 37%; background: rgb(201, 138, 62);"></div>
            </div>
            <span class="neuron-value" id="out_D_9_val">37%</span>
            <span class="dish-name" id="out_D_9_dish">Nachrichten-Apps abends deaktivieren</span>
          </div></div></div><div class="category-panel" data-cat-id="E"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(138, 94, 168);"><span class="cat-name">E. Stressreduktion-Maßnahmen (10)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row dish-row" id="row_out_E_0">
            <span class="neuron-label">Maßnahme-​Slot 1</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_0_fill" style="width: 31%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_0_val">31%</span>
            <span class="dish-name" id="out_E_0_dish">Sanfte Bewegung/Spaziergang</span>
          </div><div class="neuron-row dish-row" id="row_out_E_1">
            <span class="neuron-label">Maßnahme-​Slot 2</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_1_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_1_val">32%</span>
            <span class="dish-name" id="out_E_1_dish">Beruhigende Musik oder Naturklänge</span>
          </div><div class="neuron-row dish-row" id="row_out_E_2">
            <span class="neuron-label">Maßnahme-​Slot 3</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_2_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_2_val">32%</span>
            <span class="dish-name" id="out_E_2_dish">Yoga Nidra (angeleitete Tiefenentspannung)</span>
          </div><div class="neuron-row dish-row" id="row_out_E_3">
            <span class="neuron-label">Maßnahme-​Slot 4</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_3_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_3_val">32%</span>
            <span class="dish-name" id="out_E_3_dish">Kurzes Gespräch mit Vertrauensperson</span>
          </div><div class="neuron-row dish-row" id="row_out_E_4">
            <span class="neuron-label">Maßnahme-​Slot 5</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_4_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_4_val">32%</span>
            <span class="dish-name" id="out_E_4_dish">Warme Dusche oder Bad</span>
          </div><div class="neuron-row dish-row" id="row_out_E_5">
            <span class="neuron-label">Maßnahme-​Slot 6</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_5_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_5_val">32%</span>
            <span class="dish-name" id="out_E_5_dish">Aromatherapie (Lavendel, Kamille)</span>
          </div><div class="neuron-row dish-row" id="row_out_E_6">
            <span class="neuron-label">Maßnahme-​Slot 7</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_6_fill" style="width: 32%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_6_val">32%</span>
            <span class="dish-name" id="out_E_6_dish">Progressive Muskelentspannung</span>
          </div><div class="neuron-row dish-row" id="row_out_E_7">
            <span class="neuron-label">Maßnahme-​Slot 8</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_7_fill" style="width: 33%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_7_val">33%</span>
            <span class="dish-name" id="out_E_7_dish">Priorisierungsliste für morgen erstellen</span>
          </div><div class="neuron-row dish-row" id="row_out_E_8">
            <span class="neuron-label">Maßnahme-​Slot 9</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_8_fill" style="width: 33%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_8_val">33%</span>
            <span class="dish-name" id="out_E_8_dish">Digitale Auszeit vor dem Schlafen</span>
          </div><div class="neuron-row dish-row" id="row_out_E_9">
            <span class="neuron-label">Maßnahme-​Slot 10</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_E_9_fill" style="width: 33%; background: rgb(138, 94, 168);"></div>
            </div>
            <span class="neuron-value" id="out_E_9_val">33%</span>
            <span class="dish-name" id="out_E_9_dish">Autogenes Training</span>
          </div></div></div><div class="category-panel" data-cat-id="F"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(213, 105, 123);"><span class="cat-name">F. Schlafqualitäts-Scores (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row" id="row_out_F_0">
            <span class="neuron-label">Erwarteter Schlafqualitäts-​Score</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_0_fill" style="width: 31%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_0_val">31 %</span>
          </div><div class="neuron-row" id="row_out_F_1">
            <span class="neuron-label">Erholungsindex</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_1_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_1_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_2">
            <span class="neuron-label">Tagesmüdigkeit-​Reduktion</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_2_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_2_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_3">
            <span class="neuron-label">Konzentrationsfähigkeit-​Prognose</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_3_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_3_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_4">
            <span class="neuron-label">Stimmungsverbesserung-​Score</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_4_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_4_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_5">
            <span class="neuron-label">Energie-​Score tagsüber</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_5_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_5_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_6">
            <span class="neuron-label">REM-​Schlaf-​Qualität</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_6_fill" style="width: 30%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_6_val">30 %</span>
          </div><div class="neuron-row" id="row_out_F_7">
            <span class="neuron-label">Tiefschlaf-​Anteil-​Prognose</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_7_fill" style="width: 29%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_7_val">29 %</span>
          </div><div class="neuron-row" id="row_out_F_8">
            <span class="neuron-label">Aufwach-​Frische-​Score</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_8_fill" style="width: 32%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_8_val">32 %</span>
          </div><div class="neuron-row" id="row_out_F_9">
            <span class="neuron-label">Konsistenz-​Score Woche</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_9_fill" style="width: 32%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_9_val">32 %</span>
          </div><div class="neuron-row" id="row_out_F_10">
            <span class="neuron-label">Stressresilienz-​Score</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_10_fill" style="width: 52%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_10_val">52 %</span>
          </div><div class="neuron-row" id="row_out_F_11">
            <span class="neuron-label">Immunfunktion-​Unterstützung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_11_fill" style="width: 52%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_11_val">52 %</span>
          </div><div class="neuron-row" id="row_out_F_12">
            <span class="neuron-label">Gedächtniskonsolidierung-​Score</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_12_fill" style="width: 51%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_12_val">51 %</span>
          </div><div class="neuron-row" id="row_out_F_13">
            <span class="neuron-label">Herzratenvariabilität-​Prognose</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_13_fill" style="width: 51%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_13_val">51 %</span>
          </div><div class="neuron-row" id="row_out_F_14">
            <span class="neuron-label">Gesamtzufriedenheit Schlafplan</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_F_14_fill" style="width: 52%; background: rgb(213, 105, 123);"></div>
            </div>
            <span class="neuron-value" id="out_F_14_val">52 %</span>
          </div></div></div><div class="category-panel" data-cat-id="G"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(233, 170, 94);"><span class="cat-name">G. Tagesrhythmus-Empfehlungen (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row" id="row_out_G_0">
            <span class="neuron-label">Aufstehzeit-​Konsistenz</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_0_fill" style="width: 30%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_0_val">30 %</span>
          </div><div class="neuron-row" id="row_out_G_1">
            <span class="neuron-label">Lichtexposition morgens</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_1_fill" style="width: 30%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_1_val">25 Min.</span>
          </div><div class="neuron-row" id="row_out_G_2">
            <span class="neuron-label">Bewegungsfenster morgens</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_2_fill" style="width: 29%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_2_val">13 Min.</span>
          </div><div class="neuron-row" id="row_out_G_3">
            <span class="neuron-label">Koffeinfenster morgens</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_3_fill" style="width: 29%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_3_val">0,6 Std. n. Wecken</span>
          </div><div class="neuron-row" id="row_out_G_4">
            <span class="neuron-label">Pausenempfehlung nachmittags</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_4_fill" style="width: 29%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_4_val">9 Min.</span>
          </div><div class="neuron-row" id="row_out_G_5">
            <span class="neuron-label">Powernap-​Fenster</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_5_fill" style="width: 29%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_5_val">13 Uhr</span>
          </div><div class="neuron-row" id="row_out_G_6">
            <span class="neuron-label">Arbeitszeiten-​Anpassung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_6_fill" style="width: 28%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_6_val">28 %</span>
          </div><div class="neuron-row" id="row_out_G_7">
            <span class="neuron-label">Mahlzeitenrhythmus-​Anpassung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_7_fill" style="width: 29%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_7_val">29 %</span>
          </div><div class="neuron-row" id="row_out_G_8">
            <span class="neuron-label">Abendliche Dimmzeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_8_fill" style="width: 28%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_8_val">20 Uhr</span>
          </div><div class="neuron-row" id="row_out_G_9">
            <span class="neuron-label">Digitale-​Auszeit-​Fenster</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_9_fill" style="width: 28%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_9_val">55 Min.</span>
          </div><div class="neuron-row" id="row_out_G_10">
            <span class="neuron-label">Bewegungsfenster abends</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_10_fill" style="width: 47%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_10_val">14 Min.</span>
          </div><div class="neuron-row" id="row_out_G_11">
            <span class="neuron-label">Sozialer-​Rhythmus-​Tipp</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_11_fill" style="width: 47%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_11_val">47 %</span>
          </div><div class="neuron-row" id="row_out_G_12">
            <span class="neuron-label">Wochenendplan-​Empfehlung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_12_fill" style="width: 48%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_12_val">48 %</span>
          </div><div class="neuron-row" id="row_out_G_13">
            <span class="neuron-label">Reise-​/​Jetlag-​Tipp</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_13_fill" style="width: 48%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_13_val">48 %</span>
          </div><div class="neuron-row" id="row_out_G_14">
            <span class="neuron-label">Saisonale Anpassung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_G_14_fill" style="width: 47%; background: rgb(233, 170, 94);"></div>
            </div>
            <span class="neuron-value" id="out_G_14_val">47 %</span>
          </div></div></div><div class="category-panel" data-cat-id="H"><button type="button" class="category-header" aria-expanded="true" style="background: rgb(165, 134, 201);"><span class="cat-name">H. Fortschritt &amp; Warnungen (15)</span><span class="category-toggle-icon">▾</span></button><div class="category-body"><div class="neuron-row" id="row_out_H_0">
            <span class="neuron-label">Schlafapnoe-​Abklärungsempfehlung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_0_fill" style="width: 60%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_0_val">60 %</span>
          </div><div class="neuron-row" id="row_out_H_1">
            <span class="neuron-label">Arzt-​Rücksprache-​Empfehlung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_1_fill" style="width: 71%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_1_val">71 %</span>
          </div><div class="neuron-row" id="row_out_H_2">
            <span class="neuron-label">Substanzreduktion-​Warnung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_2_fill" style="width: 55%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_2_val">55 %</span>
          </div><div class="neuron-row" id="row_out_H_3">
            <span class="neuron-label">Bildschirmzeit-​Warnung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_3_fill" style="width: 55%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_3_val">55 %</span>
          </div><div class="neuron-row" id="row_out_H_4">
            <span class="neuron-label">Stressüberlastung-​Warnung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_4_fill" style="width: 50%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_4_val">50 %</span>
          </div><div class="neuron-row" id="row_out_H_5">
            <span class="neuron-label">Plateau-​Risiko</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_5_fill" style="width: 50%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_5_val">50 %</span>
          </div><div class="neuron-row" id="row_out_H_6">
            <span class="neuron-label">Motivationsimpuls</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_6_fill" style="width: 71%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_6_val">71 %</span>
          </div><div class="neuron-row" id="row_out_H_7">
            <span class="neuron-label">Erfolgsprognose 4 Wochen</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_7_fill" style="width: 71%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_7_val">71 %</span>
          </div><div class="neuron-row" id="row_out_H_8">
            <span class="neuron-label">Rückfallrisiko Gewohnheiten</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_8_fill" style="width: 73%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_8_val">73 %</span>
          </div><div class="neuron-row" id="row_out_H_9">
            <span class="neuron-label">Konsistenz-​Warnung</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_9_fill" style="width: 73%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_9_val">73 %</span>
          </div><div class="neuron-row" id="row_out_H_10">
            <span class="neuron-label">Nächtliches-​Wachliegen-​Risiko</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_10_fill" style="width: 50%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_10_val">50 %</span>
          </div><div class="neuron-row" id="row_out_H_11">
            <span class="neuron-label">Übermüdung-​Risiko tagsüber</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_11_fill" style="width: 51%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_11_val">51 %</span>
          </div><div class="neuron-row" id="row_out_H_12">
            <span class="neuron-label">Langzeit-​Erfolgswahrscheinlichkeit</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_12_fill" style="width: 51%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_12_val">51 %</span>
          </div><div class="neuron-row" id="row_out_H_13">
            <span class="neuron-label">Anpassungsbedarf Schlafzimmer</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_13_fill" style="width: 51%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_13_val">51 %</span>
          </div><div class="neuron-row" id="row_out_H_14">
            <span class="neuron-label">Anpassungsbedarf Routine</span>
            <div class="bar-track">
              <div class="bar-fill output-fill" id="out_H_14_fill" style="width: 50%; background: rgb(165, 134, 201);"></div>
            </div>
            <span class="neuron-value" id="out_H_14_val">50 %</span>
          </div></div></div></div>
    </section>
  </main>

  <footer class="app-footer">
    <p>Ausführungsbeispiel einer domänenkonfigurierbaren neuronalen Visualisierungseinheit (Patentanmeldung Prof.&nbsp;Dr.&nbsp;med. Paolo Brenner) — Demo-Implementierung, keine medizinische Schlafberatung im Einzelfall. Teil der Netz-Serie mit Herzkreislauf20, Kleidung20, Psyche20, BörsenBrain50 und SchlankGenuss100. Auch bekannt als RuheKraft100 / TiefSchlafBrain100.</p>
  </footer>
</div>

<!-- Info-Dialog -->
<div class="modal-overlay hidden" id="info-modal" role="dialog" aria-modal="true" aria-labelledby="info-modal-title">
  <div class="modal-window">
    <div class="modal-title-bar">
      <span id="info-modal-title">Info zu SchlafFit100</span>
      <button class="title-btn close" id="btn-close-info" type="button" aria-label="Info schließen">✕</button>
    </div>
    <div class="modal-body">
      <h3>Was ist SchlafFit100?</h3>
      <p>SchlafFit100 ist ein Ausführungsbeispiel einer domänenkonfigurierbaren neuronalen Visualisierungseinheit mit 100 Eingabe- und 100 Ausgabeneuronen, gegliedert in je 8 Kategorien. Die Kernberechnung ist ein echtes, browserfähiges künstliches neuronales Netz (100 → 64 verdeckte ReLU-Neuronen → 100 Sigmoid-Ausgabeneuronen) mit real trainierten Gewichtsmatrizen, trainiert per Backpropagation (Adam-Optimierer) auf 1.000.000 synthetischen, schlafmedizinisch plausiblen Musterfällen (Demo-Implementierung).</p>
      <h3>Wie funktioniert die Berechnung?</h3>
      <p>Jede Änderung eines Eingabe-Balkens löst sofort eine echte Netz-Vorwärtsberechnung aus: Der 100-dimensionale Eingabevektor wird mit der trainierten Gewichtsmatrix W1 verrechnet, durch eine ReLU-Aktivierung in der verdeckten Schicht geführt, anschließend mit W2 auf die 100 Ausgabe-Neuronen projiziert und dort per Sigmoid auf 0–100 skaliert — vollständig client-seitig im Browser, ohne Server-Anfrage. Für Empfehlungs-Slots (Abendroutine, Schlafzimmer, Bildschirm, Stress) wird zusätzlich die am besten passende Maßnahme aus einem hinterlegten Pool per Distanz-Scoring ausgewählt (nachgeschaltete Decoder-Stufe).</p>
      <p>Diese Anwendung ist Teil einer Patent-Serie zur „Neuronalen Benutzeroberfläche zur Kategorisierung und Visualisierung von Daten eines künstlichen neuronalen Netzes" (u.a. Herzkreislauf20, Kleidung20, Psyche20, BörsenBrain50, SchlankGenuss100).</p>
    </div>
    <div class="modal-footer">
      <button class="win-button" id="btn-close-info-2" type="button">Schließen</button>
    </div>
  </div>
</div>

<script src="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/data.js"></script>
<script src="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/weights.js"></script>
<script src="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/engine.js"></script>
<script src="./SchlafFit100 — Neuronale Visualisierungseinheit für Schlaf &amp; Schlafhygiene_files/app.js"></script>
<script data-pplx-inline-edit="">
(function () {
  if (window === window.top) return;

  const allowedParentOrigins = ["https://www.perplexity.ai","https://perplexity.ai","https://testing.perplexity.ai","https://staging.perplexity.ai","https://*.preview.i.perplexity.ai","http://localhost:3000","http://127.0.0.1:3000","http://localhost:5173","http://127.0.0.1:5173"];
  const MAX_FONT_BYTES = 500 * 1024;
  const MAX_TOTAL_FONT_BYTES = 2 * 1024 * 1024;
  let scrollForwarding = false;
  let scrollRaf = 0;
  let trustedTopOrigin = null;

  // Allow entries like "https://*.preview.i.perplexity.ai" — the wildcard
  // matches a single DNS label (no dots), so "https://*.foo" cannot stretch
  // across multiple labels.
  function matchesAllowedOrigin(origin) {
    if (!origin) return false;
    for (const entry of allowedParentOrigins) {
      if (!entry.includes("*")) {
        if (entry === origin) return true;
        continue;
      }
      const pattern = new RegExp(
        "^" +
          entry.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^.]+") +
          "$",
      );
      if (pattern.test(origin)) return true;
    }
    return false;
  }

  // Trust decision: when the sender is same-origin-visible (event.origin is a
  // real origin like https://www.perplexity.ai) we trust event.origin directly.
  // When event.origin is "null" (opaque broker srcdoc), we fall back to the
  // broker's stamped `parentOrigin` to identify the top window. The fallback
  // is claim-only — we rely on the browser's native `targetOrigin` enforcement
  // on the response path (see postToTrustedTop) to ensure replies can't be
  // delivered to anyone but the actual top window of that claimed origin.
  function getTrustedParentOrigin(event) {
    const forwardedParentOrigin =
      typeof event.data.parentOrigin === "string" ? event.data.parentOrigin : null;
    const parentOrigin = event.origin === "null" ? forwardedParentOrigin : event.origin;
    return matchesAllowedOrigin(parentOrigin) ? parentOrigin : null;
  }

  // All responses go to window.top with targetOrigin = the allowlisted origin.
  // An attacker that iframes us inside their own null-origin broker can claim
  // any parentOrigin they like, but the browser will drop the reply whenever
  // the real top's origin doesn't match — so the screenshot never leaves.
  function postToTrustedTop(message) {
    if (!trustedTopOrigin) return;
    try {
      window.top.postMessage(message, trustedTopOrigin);
    } catch (_error) {}
  }

  function inlineAll(original, clone) {
    if (original.nodeType !== 1 || clone.nodeType !== 1) return;

    try {
      const computedStyle = getComputedStyle(original);
      // cssText on a computed style is the serialized declaration in modern
      // Chromium/Safari — a single read beats enumerating ~400 longhand
      // properties. Firefox returns "" here, so we fall back on empty.
      const serialized = computedStyle.cssText;
      if (serialized) {
        clone.style.cssText = serialized;
      } else {
        const parts = new Array(computedStyle.length);
        for (let index = 0; index < computedStyle.length; index += 1) {
          const property = computedStyle[index];
          parts[index] = `${property}:${computedStyle.getPropertyValue(property)};`;
        }
        clone.style.cssText = parts.join("");
      }
    } catch (_error) {}

    const originalChildren = original.children;
    const clonedChildren = clone.children;
    for (
      let index = 0;
      index < originalChildren.length && index < clonedChildren.length;
      index += 1
    ) {
      inlineAll(originalChildren[index], clonedChildren[index]);
    }
  }

  function extractFontUrl(srcValue) {
    const matches = [
      ...srcValue.matchAll(
        /url\(["']?([^"')]+)["']?\)(?:\s*format\(["']?([^"')]+)["']?\))?/gi,
      ),
    ];
    if (matches.length === 0) return null;
    const woff2 = matches.find((m) => m[2] && m[2].toLowerCase().includes("woff2"));
    if (woff2) return woff2[1];
    const woff = matches.find((m) => m[2] && m[2].toLowerCase().includes("woff"));
    if (woff) return woff[1];
    return matches[0][1];
  }

  // Cache resolved font URL -> data URI across captures. Fonts on a page
  // essentially never change, and a batch run emits multiple captures back to
  // back — without this we'd refetch + re-base64 every time.
  const fontDataUriCache = new Map();
  const SRC_DECLARATION_RE = /src\s*:\s*[^;}]+/i;

  async function fetchAsDataUri(url) {
    if (fontDataUriCache.has(url)) return fontDataUriCache.get(url);
    let dataUri = null;
    try {
      const response = await fetch(url, { mode: "cors", credentials: "omit" });
      if (response.ok) {
        const blob = await response.blob();
        if (blob.size <= MAX_FONT_BYTES) {
          dataUri = await new Promise((resolve) => {
            const reader = new FileReader();
            reader.onloadend = () =>
              resolve(typeof reader.result === "string" ? reader.result : null);
            reader.onerror = () => resolve(null);
            reader.readAsDataURL(blob);
          });
        }
      }
    } catch (_error) {
      dataUri = null;
    }
    fontDataUriCache.set(url, dataUri);
    return dataUri;
  }

  function collectFontFaceRuleTexts() {
    const rules = [];
    for (const sheet of document.styleSheets) {
      let cssRules;
      try {
        cssRules = sheet.cssRules;
      } catch (_error) {
        continue;
      }
      if (!cssRules) continue;
      for (const rule of cssRules) {
        const cssText = rule.cssText || "";
        if (cssText.startsWith("@font-face")) rules.push(cssText);
      }
    }
    return rules;
  }

  async function buildInlinedFontCss() {
    const ruleTexts = collectFontFaceRuleTexts();
    if (ruleTexts.length === 0) return null;

    const resolved = ruleTexts.map((cssText) => {
      if (!SRC_DECLARATION_RE.test(cssText)) return null;
      const srcMatch = cssText.match(/src\s*:\s*([^;}]+)[;}]/i);
      if (!srcMatch) return null;
      const url = extractFontUrl(srcMatch[1]);
      if (!url) return null;
      try {
        return { cssText, url: new URL(url, document.baseURI).href };
      } catch (_error) {
        return null;
      }
    });

    const dataUris = await Promise.all(
      resolved.map((entry) => (entry ? fetchAsDataUri(entry.url) : Promise.resolve(null))),
    );

    const inlined = [];
    let totalBytes = 0;
    for (let index = 0; index < resolved.length; index += 1) {
      const entry = resolved[index];
      const dataUri = dataUris[index];
      if (!entry || !dataUri) continue;
      const approxBytes = dataUri.length * 0.75;
      if (totalBytes + approxBytes > MAX_TOTAL_FONT_BYTES) break;
      totalBytes += approxBytes;
      inlined.push(entry.cssText.replace(SRC_DECLARATION_RE, `src: url("${dataUri}")`));
    }
    return inlined.length > 0 ? inlined.join("\n") : null;
  }

  function stripExternal(clone) {
    const images = clone.querySelectorAll("img");
    for (let index = 0; index < images.length; index += 1) {
      const src = images[index].getAttribute("src");
      if (src && !src.startsWith("data:")) images[index].removeAttribute("src");
    }

    const elements = clone.querySelectorAll("*");
    for (let index = 0; index < elements.length; index += 1) {
      const style = elements[index].style.cssText;
      if (style && style.includes("url(")) {
        elements[index].style.cssText = style.replace(
          /url\(["']?(?!data:)[^)"']*["']?\)/gi,
          "none",
        );
      }
    }
  }

  function emitScroll() {
    scrollRaf = 0;
    if (!scrollForwarding) return;
    postToTrustedTop({
      type: "INLINE_EDIT_SCROLL",
      scrollX: window.scrollX,
      scrollY: window.scrollY,
    });
  }

  window.addEventListener(
    "scroll",
    function () {
      if (!scrollForwarding || scrollRaf) return;
      scrollRaf = requestAnimationFrame(emitScroll);
    },
    { passive: true, capture: true },
  );

  async function handleCaptureRequest(event) {
    const requestId = event.data.requestId;
    const scrollX = window.scrollX;
    const scrollY = window.scrollY;
    const width = window.innerWidth;
    const height = window.innerHeight;

    function postResult(dataUrl) {
      postToTrustedTop({
        type: "INLINE_EDIT_SCREENSHOT_RESULT",
        requestId,
        dataUrl,
        scrollX,
        scrollY,
      });
    }

    try {
      // Wait for any pending web fonts to resolve so both inline metrics and
      // the @font-face inlining below see the same loaded faces.
      if (document.fonts && document.fonts.ready) {
        try {
          await document.fonts.ready;
        } catch (_error) {}
      }

      const clone = document.documentElement.cloneNode(true);
      inlineAll(document.documentElement, clone);

      const removedNodes = clone.querySelectorAll("script,link[rel=\"stylesheet\"],style");
      for (let index = 0; index < removedNodes.length; index += 1) {
        removedNodes[index].remove();
      }

      stripExternal(clone);

      // Re-embed web fonts as data-URI @font-face rules so the SVG rasterizer
      // can resolve them — external font URLs aren't fetched during
      // foreignObject rendering, which would otherwise force a fallback face
      // and change text metrics.
      const inlinedFontCss = await buildInlinedFontCss();
      if (inlinedFontCss) {
        const styleEl = document.createElement("style");
        styleEl.textContent = inlinedFontCss;
        const head = clone.querySelector("head");
        if (head) head.appendChild(styleEl);
        else clone.insertBefore(styleEl, clone.firstChild);
      }

      const html = new XMLSerializer().serializeToString(clone);
      const svg =
        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` +
        '<foreignObject width="100%" height="100%">' +
        `<div xmlns="http://www.w3.org/1999/xhtml" style="width:${width}px;height:${height}px;overflow:hidden">` +
        `<div style="position:relative;left:-${scrollX}px;top:-${scrollY}px">` +
        html +
        "</div></div></foreignObject></svg>";
      const svgUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
      const image = new Image();
      image.onload = function () {
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        postResult(canvas.toDataURL("image/png"));
      };
      image.onerror = function () {
        postResult(null);
      };
      image.src = svgUrl;
    } catch (_error) {
      postResult(null);
    }
  }

  window.addEventListener("message", function (event) {
    if (!event.data) return;
    // Only accept messages from the direct parent frame. Blocks sibling /
    // unrelated-window postMessage senders that could otherwise reach us.
    if (event.source !== window.parent) return;

    const trustedParentOrigin = getTrustedParentOrigin(event);
    if (!trustedParentOrigin) return;
    trustedTopOrigin = trustedParentOrigin;

    if (event.data.type === "INLINE_EDIT_SCROLL_START") {
      scrollForwarding = true;
      emitScroll();
      return;
    }

    if (event.data.type === "INLINE_EDIT_SCROLL_STOP") {
      scrollForwarding = false;
      if (scrollRaf) cancelAnimationFrame(scrollRaf);
      scrollRaf = 0;
      return;
    }

    if (event.data.type !== "INLINE_EDIT_CAPTURE_REQUEST") return;

    handleCaptureRequest(event);
  });
})();


</script>

</body></html>